<template>
    <el-form :model="formData" mstatus-icon :rules="rules" ref="formData" label-width="100px"> <!-- ref:表单验证(和提交数据相同) -->
        <el-form-item label="用户名：" prop="username">  <!-- prop的值与rules里面要验证的字段值是对应 -->
            <el-input
                    prefix-icon="el-icon-user" style="width: 75%"
                    type="text" v-model="formData.username" autocomplete="off">
            </el-input>
        </el-form-item>
        <el-form-item label="密 码：" prop="password1">
            <el-input
                    prefix-icon="el-icon-menu"
                    style="width: 75%" show-password type="password"
                    v-model="formData.password1" autocomplete="off">
            </el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="password2">
            <el-input
                    prefix-icon="el-icon-menu"
                    style="width: 75%" show-password type="password"
                    v-model="formData.password2" autocomplete="off">
            </el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">  <!-- prop的值与rules里面要验证的字段值是对应 -->
            <el-input
                    prefix-icon="el-icon-paperclip" style="width: 75%"
                    type="text" v-model="formData.email" autocomplete="off">
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-button el-button type="primary" @click="register()" style="margin-right: 100px">注册</el-button>
            <span class="pull-right"><small>已经有账号？</small><a href="../login/index.html">登录</a></span>
        </el-form-item>
    </el-form>
</template>

<script>

    export default{
        name: 'InputAndBtn',
        data(){
            return{
                //用户信息
                formData:{
                    username:'',
                    password1:'',
                    password2:'',
                    email: '',
                },
                //两次密码效验
                pas: false,
                //表单规则
                rules:{
                    username: [{ required: true, message: '用户名不能为空', trigger: 'blur' },
                        {min:2,max:80, message: '用户名不能小于2位,，大于80位', trigger: 'blur' },
                    ],  //blur失去焦点
                    password1: [{ required: true, message: '密码不能为空', trigger: 'blur'},
                        { pattern: /^[ a-zA-Z0-9]{6,30}$/, message: '密码不能小于6位,不能大于30位,无特殊字符', trigger: 'blur'},
                    ],
                    password2: [{ required: true, message: '密码不能为空', trigger: 'blur'},
                        {validator: (rule, value, callback) => {
                            if (value === '') {
                                callback(new Error('请再次输入密码'));
                            } else if (value !== this.$data.formData.password1) {
                                callback(new Error('两次输入密码不一致!'));
                            } else {
                                callback();
                            }
                        },trigger: 'blur'}],
                    email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' },
                        { pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/, message: '请输入正确的邮箱', trigger: 'blur' },
                    ],  //blur失去焦点
                },
            }
        },
        methods:{
            //注册注册
            register(){
                this.$refs.formData.validate((valid) => {
                    if (valid) {
                        this.$http({
                            method: "POST",
                            url: "/user/insert",
                            data: {
                                username: this.formData.username,
                                password: this.formData.password2,
                                email: this.formData.email,
                            }
                        }).then((res)=>{
                            if(res.data.flag){
                                this.$message.success({
                                    message: res.data.message,
                                    type: 'success'
                                });
                                setTimeout(function () {
                                    location.href="../../login/index.html";
                                },1500)
                            }else{
                                this.$message.error(res.data.message);
                            }
                        });
                    } else {
                        this.$message.error('此提交不符合规则');
                        return false;
                    }
                });
            },
        }
    }
</script>

<style>

</style>